<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <!-- Bootstrap 3.3.6 -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../../static/bootstrap/css/bootstrap.min.css">
    <!-- jQuery 2.2.3 -->
    <script src="../../../static/plugins/jQuery/jquery-2.2.3.min.js"></script>

    <script type="text/javascript" src="../../../static/elantra/js/jquery.cookie.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            if ($.cookie("rmbUser") == "true") {
                $("#ck_rmbUser").attr("checked", true);
                $("#account").val($.cookie("username"));
                $("#pass").val($.cookie("password"));
            }
        });
    </script>
    <style type="text/css">
        * {
            font-family: "微软雅黑", serif;
        }

        body {
            padding: 0;
            margin: 0;
            background-size: cover;
            background-position-y: bottom;
        }

        .container-fluid {
            height: 650px;
            width: 100%;
            background:url(../../../static/elantra/img/login/bg_icon.png) no-repeat;
        }

        .logo-box {
            margin-top: 15px;
            margin-bottom: 15px;

        }
        .col-lg-4{
            margin-left: 400px;
            float: right;
        }

        .logo-box span{
            height: 30px;
            line-height: 30px;
            padding-left: 20px;
            font-size: 15px;

        }

        .logo {
            height: 30px;
            width: 30px;
            margin-left: 300px;
            background: url(../../../static/elantra/img/login/logo_icon.png) no-repeat;
        }


        input {
            margin-top: 10px;
        }


        .login-box {
            /* background: url(static/elantra/img/login/erweima_icon.png) no-repeat top right; */
            margin: 160px auto auto auto;
            padding: 40px;
            padding-bottom: 60px;
            background-color: white;
            max-width: 350px;
            border-radius: 4px;
            position: relative;
        }

        .login-box-tab {
            background: url(../../../static/elantra/img/login/erweima_icon.png) no-repeat top right;
            position: absolute;
            z-index: 100;
            width: 103px;
            height: 109px;
            top: 0px;
            right: 0px;
        }

        .login-box li {
            width: 100%;
            border-bottom: #EEEEEE 1px solid;
            line-height: 40px;
            margin-bottom: 29px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
        }

        .login-box li:active {
            border-bottom: #ffb211 3px solid;
        }

        .btn-login {
            width: 100%;
            max-width: 320px;
            height: 40px;
            color: white;
            font-size: 16px;
            background-color: #306ADE;
            border: 0;
            border-radius: 4px;
            outline: none;
        }

        .btn-login:hover {
            background-color: #103b90;
        }

        .login-er-box {
            /* background: url(static/elantra/img/login/zhanghao_icon.png) no-repeat top right; */
            margin: 100px auto auto auto;
            padding: 40px;
            padding-bottom: 60px;
            background-color: white;
            max-width: 350px;
            border-radius: 4px;
            position: relative;
        }

        .login-er-box-tab {
            background: url(../../../static/elantra/img/login/zhanghao_icon.png) no-repeat top right;
            position: absolute;
            z-index: 100;
            width: 103px;
            height: 109px;
            top: 0px;
            right: 0px;
        }

        .login-er-box H5 {
            width: 100%;
            line-height: 40px;
            margin-bottom: 29px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>

<div class="row logo-box">
    <div class="col-lg-12 logo"></div>
    <span>管理后台</span>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4 text-center">
            <!-- 账号登录 -->
            <div class="login-box">
                <span class="login-box-tab"></span>
                <ul class="list-unstyled">
                    <li class="pull-left">账号登录</li>
                    <!--<li>短信登录</li>-->
                </ul>
                <form class="form-horizontal text-left">
                    <input type="text" class="form-control" placeholder="手机号" id="account">
                    <input type="password" class="form-control" placeholder="密码" id="pass">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="ck_rmbUser"> 记住登录状态
                        </label>
                    </div>
                </form>
                <input type="button" id="btnLogin" onclick="login()" value="登录" class="btn-login"/>
            </div>
            <!-- 二维码登录 -->
            <div class="login-er-box" style="display:none;">
                <span class="login-er-box-tab"></span>
                <h5>二维码登录</h5>
                <img id="shareImg" style="margin: auto auto 20px auto;width:200px;height:200px">
                <p>请打开手机客户端</p>
                <p>扫描二维码登录使用</p>
            </div>
        </div>
    </div>
</div>

<!-- 提示框begin -->
<div class="modal fade" id="myModal" tabindex="-10" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    登陆失败
                </h4>
            </div>
            <div class="modal-body">
                用户名和密码不匹配
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 提示框end -->
<!-- Bootstrap 3.3.6 -->
<script src="../../../static/bootstrap/js/bootstrap.min.js"></script>

<script src="../../../static/elantra/js/login.js"></script>

<script type="text/javascript">
    /* 切换到二维码登录 */
    $(".login-box-tab").click(function () {
        $('.login-box').hide();
        $('.login-er-box').show();

        initERTimer();
    });

    /* 切换到账号登录 */
    $(".login-er-box-tab").click(function () {
        $('.login-er-box').hide();
        $('.login-box').show();

        clearERTimer();
    });

    var baseUrl = "${pageContext.request.contextPath}";

    function gen() {
        token = generateUUID();
        $("#shareImg").attr("src", baseUrl + "/loginQRCode.do?width=200&height=200&uuid=" + token);
    }

    function checkLogin() {
        $.ajax({
            type: "post",
            url: baseUrl + "/loginByQRCode.do",
            data: {"uuid": token},
            dataType: 'json',
            success: function (result) {
                //var json = JSON.parse(result);
                if (!result.req) {
                    //setTimeout(checkLogin(),1000*1);
                } else {
                    //window.clearInterval(timerGen);
                    //window.clearInterval(timerCheckLogin);
                    clearERTimer();
                    window.location.href = "web/index.do";
                }
            }
        });
    }

    var timerGen;
    var timerCheckLogin;
    $(function () {
        /* gen();
        timerGen=window.setInterval('gen()',1000*60*3);
        //setTimeout(checkLogin(),1000*3);
        timerCheckLogin=window.setInterval('checkLogin()',1000*3); */
    });

    function initERTimer() {
        gen();

        timerGen = window.setInterval('gen()', 1000 * 60 * 3);
        timerCheckLogin = window.setInterval('checkLogin()', 1000 * 3);
        /* if(!timerGen){
            timerGen=window.setInterval('gen()',1000*60*3);
        }
        if(!timerCheckLogin){
            timerCheckLogin=window.setInterval('checkLogin()',1000*3);
        } */
    }

    function clearERTimer() {
        if (timerGen) {
            window.clearInterval(timerGen);
        }
        if (timerCheckLogin) {
            window.clearInterval(timerCheckLogin);
        }
    }

    function generateUUID() {
        var d = new Date().getTime();
        var uuid = 'xxxxxxxxxxxx8xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g,
            function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
        return "elantra_" + uuid;
    };

    var token = "";
</script>
</body>
</html>